<script setup>
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'

const backFilePath = ref('')
const backLoading = ref(false)
async function handleSelectBackFile() {
  backFilePath.value = await window.electron.ipcRenderer.invoke('selectBackupFolder')
}
async function handleBackFile() {
  if (!backFilePath.value) {
    ElMessage.warning('请填写备份目录')
    return
  }
  backLoading.value = true
  await window.electron.ipcRenderer.invoke('backup-database', backFilePath.value)
  setTimeout(() => {
    backLoading.value = false
    ElMessage.success('备份成功')
  }, 500)
}

const importDatabasePath = ref('')
const importDatabaseLoading = ref(false)
async function handleImportDatabaseFile() {
  await ElMessageBox.confirm(
    '导入成功后会直接覆盖当前所有数据，您可以先进行“数据备份”再导入',
    '导入提示',
    {
      confirmButtonText: '确认导入',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
  importDatabasePath.value = await window.electron.ipcRenderer.invoke('selectDatabaseFile')
  if (!importDatabasePath.value) {
    ElMessage.warning('请选择要导入的数据文件')
    return
  }
  importDatabaseLoading.value = true
  const res = await window.electron.ipcRenderer.invoke('importDatabase', importDatabasePath.value)
  if (res === '导入成功') {
    setTimeout(() => {
      importDatabaseLoading.value = false
      ElMessage.success('导入成功')
    }, 500)
  } else {
    importDatabaseLoading.value = false
    ElMessage.fail(res)
  }
}

const clearDataLoading = ref(false)
async function handleClearDatabase() {
  await ElMessageBox.confirm(
    '删除数据后无法恢复，请谨慎操作，如有需要可以先“备份”再清除',
    '操作提示',
    {
      confirmButtonText: '确认清除',
      cancelButtonText: '取消',
      type: 'warning'
    }
  )
  try {
    clearDataLoading.value = true
    const res = await window.electron.ipcRenderer.invoke('clearDatabase')
    clearDataLoading.value = false
    if (res === 'Database cleared successfully.') {
      ElMessage.success('清除成功')
    }
  } catch (error) {
    ElMessage.fail(error)
    clearDataLoading.value = false
  }
}
</script>

<template>
  <div class="system-set">
    <el-form class="form-wrap">
      <el-form-item label="数据备份">
        <el-input
          v-model="backFilePath"
          placeholder="请输入备份目录"
          style="width: 300px"
        ></el-input>
        <el-button type="primary" @click="handleSelectBackFile">选择备份保存文件夹</el-button>
        <el-button type="primary" :loading="backLoading" @click="handleBackFile">备份</el-button>
      </el-form-item>
      <el-form-item label="数据导入">
        <el-input
          v-model="importDatabasePath"
          placeholder="请选择导入的数据文件"
          style="width: 300px"
          disabled
        ></el-input>
        <!-- <el-button type="primary" @click="handleSelectImportFile">选择导入文件</el-button> -->
        <el-button type="primary" :loading="importDatabaseLoading" @click="handleImportDatabaseFile"
          >导入</el-button
        >
      </el-form-item>
      <el-form-item label="数据清除">
        <!-- <el-input
          v-model="importDatabasePath"
          placeholder="请选择导入的数据文件"
          style="width: 300px"
          disabled
        ></el-input> -->
        <el-button type="primary" :loading="clearDataLoading" @click="handleClearDatabase"
          >清除</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="scss" scoped>
.system-set {
  .form-wrap {
    width: 800px;
  }
}
</style>
